<template>
  <div class="video-container common-container">
    <video
      :src="mv.url"
      controls
      ref="video"
      class="video-player"></video>
    <div class="detail">
      <p class="title">{{ mv.name }}</p>
      <div class="artist-info">
        <span>演唱：{{ mv.artist }}</span>
        <span>{{ mv.playCount }}次观看</span>
        <span>发布时间：{{ mv.publishTime }}</span>
      </div>
      <div class="operation">
        <DecoratedButton
          name="收藏"
          icon="&#xe761;"
          class="operate" />
        <DecoratedButton
          name="下载"
          icon="&#xe61a;"
          class="operate" />
        <DecoratedButton
          name="分享"
          icon="&#xe680;"
          class="operate" />
        <DecoratedButton
          name="评论"
          icon="&#xe60b;"
          class="operate" />
      </div>
    </div>
    <Mv
      :mvs="mvSimi"
      title="相关推荐" />
  </div>
</template>

<script lang="ts" setup>
import { reactive, Ref, inject } from 'vue';
import { useRoute } from 'vue-router';
import { MV } from '../model';
import { getMvDetail, getMvUrl, getSimiMv } from '../api/api';
import { elMessage, getTheme } from '../utils/util';
import { elMessageType } from '../model/enum';
import DecoratedButton from '../components/DecoratedButton.vue';
import Mv from '../components/Mv.vue';
//设置主题
const color = getTheme().get('fontColor');
const colorBlack = getTheme().get('fontBlack');
const boxShadow = getTheme().get('shadow');

const route = useRoute();
//获取视频id
const id = route.query.id;

//mv信息
const mv = reactive<MV>({
  id: '' + id,
  name: '',
  image: '',
  artist: '',
  playCount: '',
  url: '',
  time: '',
  publishTime: '',
  available: '',
});

//相似的mv推荐
const mvSimi = reactive<MV[]>([]);
//页面第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;

//获取mv详情
getMvDetail(mv.id)
  .then((response: any) => {
    const {
      data: { name, artistName, cover, playCount, duration, publishTime },
    } = response;
    mv.name = name;
    mv.image = cover;
    mv.artist = artistName;
    mv.playCount = playCount;
    mv.time = duration;
    mv.publishTime = publishTime;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
//获取mv播放地址
getMvUrl(mv.id)
  .then((response: any) => {
    const {
      data: { url, fee },
    } = response;
    mv.url = url;
    mv.available = fee;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
//获取相似的Mv
getSimiMv(mv.id)
  .then((response: any) => {
    const { mvs } = response;
    mvs.forEach((item: any) => {
      mvSimi.push({
        id: item.id as string,
        image: item.cover as string,
        name: item.name as string,
        artist: item.artistName as string,
        playCount: item.playCount as string,
      });
    });
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.video-container {
  .video-player,
  .detail {
    margin-left: 4px;
  }
  .video-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    height: 520px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: @shadow;
    outline: none;
    &::-webkit-media-controls-timeline {
      height: 3px !important;
      position: absolute;
      bottom: 60px !important;
      width: 95%;
      left: 1vw;
      padding-bottom: 0 !important;
    }
    &::-webkit-media-controls-current-time-display {
      font-size: 13px;
      position: absolute;
      left: 77px;
    }
    //剩余时间
    &::-webkit-media-controls-time-remaining-display {
      font-size: 13px;
      position: absolute;
      left: 103px;
    }
    //播放按钮
    &::-webkit-media-controls-play-button {
      position: absolute;
      color: #ffffff;
      left: 2.2vw;
      background-size: 20px !important;
    }
    &::-webkit-media-controls-volume-control-container {
      position: absolute;
      right: 120px;
    }
    &::-webkit-media-controls-mute-button {
      background-size: 20px;
    }
    &::-webkit-media-controls-fullscreen-button {
      position: absolute;
      right: 60px;
      background-size: 20px !important;
    }
    &::-webkit-media-controls-enclosure {
      padding-right: 10px;
    }
  }

  .detail {
    width: 80vw;
    .title {
      font-size: 14px;
      color: @font-color;
      margin: 15px 0;
      letter-spacing: 1px;
    }
    .artist-info {
      span {
        display: inline-block;
        font-size: 12px;
        color: @font-color-gray;
        &:nth-child(2) {
          margin: 0 15px;
        }
      }
    }
    .operation {
      margin-top: 20px;
      display: flex;
      .operate {
        width: 110px;
        &:first-child {
          &:deep(.iconfont) {
            color: #f8312f;
          }
        }
      }
    }
  }
}
</style>
